<template>
    <el-skeleton 
    :loading="loading" 
    animated
    >
        <template slot="template">
            <div 
            class="skeleton" 
            v-for="item in rows" 
            :key="item"
            >
                <div class="row">
                    <el-skeleton-item variant="p" style="width: 60%; height: 22px;" />
                </div>

                <div class="row">
                    <el-skeleton-item variant="p" style="width: 300px; height: 18px;" />
                </div>

                <div class="row">
                    <el-skeleton-item variant="p" style="width: 100%; height: 16px;" />
                </div>
            </div>
        </template>
        
        <slot></slot>
    </el-skeleton>
</template>

<script>
export default {
    props: {
        loading: {
            type: Boolean,
            default: false,
        },
        rows: {
            type: Number,
            default: 10,
        },
    },
};
</script>

<style lang="scss" scoped>
    .skeleton{
        & + .skeleton{
            margin-top: 10px;
        }

        .row{
            & + .row{
                margin-top: 8px;
            }
        }
    }
</style>